<template>
	<u-form :model="form" ref="uForm">
		<!-- 用户名 -->
		<u-form-item label-width="100" label="用户名:" prop="username">
			<u-input v-model="form.username" placeholder="请用户名" maxlength="11" />
		</u-form-item>
		<!-- /用户名 -->
		<!-- 密码 -->
		<u-form-item label-width="108" label="用户密码:" prop="password">
			<u-input v-if="istrue === true" placeholder="请输入密码" border="none" v-model="form.password"
				class="input_class_pwd" :password="true">
				<template slot="suffix">
					<u-icon name="eye-off" @tap="isText('true')" size="18"></u-icon>
				</template>
			</u-input>
			<u-input v-else="istrue === false" placeholder="请输入密码" border="none" v-model="form.password"
				class="input_class_pwd" :password="false">
				<template slot="suffix">
					<u-icon name="eye-fill" @tap="isText('false') " color="#247CFF"></u-icon>
				</template>
			</u-input>
		</u-form-item>
		<!-- /密码 -->
		<!-- 性别 -->
		<u-form-item label="性别:" label-width="100">
			<u-radio-group v-model="form.sex">
				<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
					{{ item.name }}
				</u-radio>
			</u-radio-group>
		</u-form-item>
		<!-- /性别 -->
		<!-- 手机验证码 -->
		<u-form-item label="手机号:" label-width="100" prop="iphone">
			<u-input placeholder="请输入你的手机号" v-model="form.iphone">

				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X后秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
				</template>

			</u-input>
		</u-form-item>
		<!-- /手机验证码 -->
		<!-- 验证消息 -->
		<u-form-item label="验证码信息:" label-width="100">
			<text>{{value2}}</text>
		</u-form-item>
		<!-- /验证消息 -->
		<!-- 验证码提交 -->
		<u-form-item label="验证码提交:" label-width="100">
			<u-code-input v-model="value" mode="box" :space="0" :maxlength="4" hairline></u-code-input>
		</u-form-item>
		<!-- /验证码提交 -->
		<!-- 表单提交 -->
		<u-button type="defaulf" @tap='submit' m>点击提交</u-button>

	</u-form>
</template>

<script>
	export default {
		data() {
			return {
				//验证码
				value2: '请点击获取验证码',
				value: '',
				//定义眼睛状态
				istrue: true,
				// isText: false,
				tips: '',
				//表单内部
				form: {

					username: '',
					password: '',
					sex: '',
					iphone: '',

				},
				//单选框
				radioList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],

				switchVal: false,
				//校验规则
				rules: {
					username: [
						//用户名的校验
						{
							required: true,
							message: '请填写用户名',
							trigger: ['change', 'blur']
						},
						{
							min: 3,
							max: 7,
							message: '姓名在3到7个字符之间',
							trigger: ['change', 'blur']
						},

					],
					password: [
						// 密码的校验
						{
							required: true,
							message: '请填写密码',
							trigger: ['change', 'blur']
						},
						{
							pattern: /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '必须是英数字带特殊符号带数字',
							trigger: ['change', 'blur']
						},
						{
							min: 6,
							max: 16,
							message: '密码长度在6到16位置',
							trigger: ['change', 'blur']
						},

					],
					iphone: [
						// 手机号的校验
						{
							required: true,
							message: '必须填写密码',
							trigger: ['change', 'blur']
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '必须是正确的手机号',
							trigger: ['change', 'blur']
						},
						
					
					]

				}
			};
		},

		methods: {
			//眼睛的状态判定
			isText(val) {
				if (val === 'true') {
					this.istrue = false
				} else {
					this.istrue = true
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.value2 = Math.floor(Math.random() * 4000+1000)
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			//提交表单
			submit() {
				if (this.value == this.value2) {
					const db = uniCloud.database();
					db.collection('users').add(this.form).then(e => {
						console.log(e)
					})
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
				}else {
				uni.showToast({
					title: '验证码错误',
					duration: 2000,
					icon: 'error',
				});
			}
			} 
		},
		//使用校验规则
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style>
	.u-form-item {
		border-bottom: 1px solid #ccc;

		padding-left: 20rpx;

	}
</style>
